import { Menu } from '@arco-design/web-react';
import { useCallback } from 'react';
import { useNavigate } from 'react-router';
const MenuItem = Menu.Item;

import './index.css';

export const Header = () => {

  const navigate = useNavigate();

  const handleLogout = useCallback(() => {

    localStorage.removeItem('token');

    navigate('/user/login');
  }, []);

  return (<div className='header-wrapper'>
    <Menu theme='dark' style={{ height: '60px' }} mode='horizontal' defaultSelectedKeys={['1']}>
      <MenuItem key='1'>首页</MenuItem>
    </Menu>

    <div className='user-info-wrapper'>
      <div className='user-info'>
        <div className='logout-wrapper'>
          <span className='logout' onClick={handleLogout}>注销</span>
        </div>
      </div>
    </div>

  </div>);
}